<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="pg" uri="http://jsptags.com/tags/navigation/pager" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@page pageEncoding="UTF-8" %>
<!doctype html>
<html lang="zh-cmn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <base href="${pageContext.request.contextPath}/"/>
    <link rel="stylesheet" href="abc/css/bootstrap.css">
</head>
<body>
<div class="container-fluid">
   <h4>用户管理</h4>
    <div>
        <button type="button" class="btn btn-primary" onclick="location='user/add'">添加用户</button>
    </div>
    <table class="table table-bordered table-striped">
        <tr>
            <th>用户名</th>
            <th>姓名</th>
            <th>电话</th>
            <th>出生日期</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        <c:forEach var="u" items="${pager.rows}">
            <tr>
                <td>${u.userCode}</td>
                <td>${u.userName}</td>
                <td>${u.phone}</td>
                <td>${u.birthday}</td>
                <td>${fn:replace(u.creationDate, "T"," ")}</td>
                <td>
                    <a href="user/${u.id}/del" class="btn btn-danger btn-sm">删除</a>
                    <a href="user/update?id=${u.id}" class="btn btn-success btn-sm">修改</a>
                    <a  href="javascript:view(${u.id})" class="btn btn-info btn-sm">查看</a>
                </td>
            </tr>
        </c:forEach>
    </table>
    <ul class="pagination pull-right">
        <pg:pager items="${pager.total}" url="user/list" maxPageItems="5" export="curr=pageNumber">
            <pg:first>
                <li><a href="${pageUrl}">&laquo;</a></li>
            </pg:first>
            <pg:pages>
                <li class="${pageNumber==curr?'active':''}"><a href="${pageUrl}">${pageNumber}</a></li>
            </pg:pages>
            <pg:last>
                <li><a href="${pageUrl}">&raquo;</a></li>
            </pg:last>
        </pg:pager>
    </ul>

</div>


<div class="modal fade" id="viewDetail">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">查看详情</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="" class="control-label col-sm-3">用户编码：</label>
                        <div class="col-sm-8" id="userCode">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="control-label col-sm-3">用户名：</label>
                        <div class="col-sm-8" id="userName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="control-label col-sm-3">电话：</label>
                        <div class="col-sm-8" id="phone">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="control-label col-sm-3">地址:</label>
                        <div class="col-sm-8" id="address">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="control-label col-sm-3">性别：</label>
                        <div class="col-sm-8" id="gender">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="control-label col-sm-3">出生年月：</label>
                        <div class="col-sm-8" id="birthday">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="control-label col-sm-3">出生年月(util.Date)：</label>
                        <div class="col-sm-8" id="bornDate">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<script src="abc/js/jquery-1.12.4.js"></script>
<script src="abc/js/bootstrap.js"></script>
<script>
    function view(id){
        $.getJSON("user/detail","id="+id,function(result){

            for(var prop in result){
                var $el=$("#"+prop);
                if($el){
                    $el.html(result[prop]);
                }
            }
            $("#viewDetail").modal("toggle");
        });



    }
</script>

</body>
</html>
